<template>
    <div class="distributors">
        <!-- 头部图片 -->
        <div class="child-header f-cen">
            <img src="../assets/images/distributors/top-distributors.jpg" />
            <div class="mask"></div>
            <div class="box">
                <div class="header-title animate__animated animate__bounceInDown">
                    <div class="title1">Distributors</div>
                    <div class="title2">Improve your practice</div>
                </div>
            </div>
        </div>

        <!-- 头部信息 -->
        <div class="header-info c">
            <div class="header-info-title">Become our representative or affiliate</div>
            <div
                class="header-info-text"
            >Bio-T Technologies for Life offer you the opportunity to become one of our representatives or affiliates in your territory</div>
            <div class="header-info-text2">
                <p>We are looking for new talent to help us in our task of extending our client range to a larger number of countries around the world.</p>
                <p>Our principal aim is to be readily available to as many of our clients as possible.</p>
            </div>
        </div>
        <!-- 居中的文字标题 -->
        <div class="column-middle-title c" style="margin: 40px;">
            "Join us in shaping the future of
            <br />Health & Prevention, Resilience & Well-Being, Lifestyle Medicine & Nutrition"
        </div>
        <!-- course专栏 -->
        <div class="course">
            <div class="course-content f-cen">
                <div class="left">
                    <img src="../assets/images/distributors/left.jpg" alt />
                </div>

                <div class="course-content-main f-col">
                    <el-icon class="icon">
                        <calendar />
                    </el-icon>
                    <div class="course-content-main-title">Next Seminars/Courses</div>
                    <div class="course-content-main-date">7/14 October 2021</div>
                    <div
                        class="course-content-main-dateInfo"
                    >Saturdays are dedicated to potential distributors</div>
                    <div
                        class="course-content-main-title"
                        style="font-size:18px"
                    >Representative and affiliate workshop</div>
                    <div class="course-content-main-text">
                        <p>
                            If you want more information send an email to
                            <a
                                href="#"
                                class="link"
                            >ingegneria@biot.it</a>
                        </p>
                        <p>
                            or call us at
                            <a href="#" class="link">+39 06 83086609</a>
                        </p>
                        <p>
                            Send a Whatsapp message to
                            <a href="#" class="link">+39 3278566369</a>
                        </p>
                        <div class="btn c">REGISTER NOW</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- advantage专栏 -->
        <div class="column-advantage">
            <div class="column-advantage-main f">
                <div class="column-advantage-item">
                    <div class="c column-advantage-item-title">Representative Advantages</div>
                    <div
                        class="c column-advantage-item-subtitle"
                    >As our official Representative YOU:</div>
                    <div class="column-advantage-item-content f-bet">
                        <div class="text">
                            <li>Will have all the training necessary to understand the workings and the potential of the CIEM System.</li>
                            <li>Will have a specific training on how to become a powerful representative, organize your courses and trainings</li>
                            <li>Will have all our marketing support in your territory</li>
                            <li>Will have the opportunity to increase your income and establish a sustainable organization in your country doing a powerful business with the CIEM System</li>
                            <li>Will earn commission on the sales of hardware and software systems made by your referrals, having your personal network</li>
                            <li>Bring your clients to our courses to be helped in sales</li>
                            <li>Attend our webinars for your knowledge and to present potential customers</li>
                        </div>
                        <div class="text">
                            <li>Investing in a sustainable and ethic job supporting therapist, coaches, veterinary,</li>bio-architects, agronomists who really wants to make the difference in the world enhancing wellbeing and performance for their clients throughout the world. The potential market for our is so wide that you can be interested only in a small part of it and it will be enough to create a reliable business.
                            <li>Will be in direct contact with our technicians and staff so you will always be informed of all our newest projects, upgrades and promotions.</li>
                            <li>Affiliate your leads and customer to our online academy to help you do diffuse our knowledge and introduce people to the change we are bringing with the CIEM System and to learn how to use it.</li>
                        </div>
                    </div>
                </div>
                <div class="block"></div>
            </div>
        </div>

        <!-- Requirements专栏 -->
        <div class="column-Requirements">
            <div class="column-Requirements-main f">
                <div class="block"></div>
                <div class="column-Requirements-item">
                    <div class="c column-Requirements-item-title">Requirements for Representatives</div>
                    <div class="column-Requirements-item-content f-bet">
                        <div class="text">
                            <li>Desire to become e fully independent representatives of our products establishing an own sustainable activity.</li>
                            <li>Be fluent in the English or Spanish or Italian language to communicate with us and to learn all is needed about the system and the marketing and sales strategies</li>
                            <li>Have a basic knowledge in the field of technology and computer technology</li>
                            <li>Have the CIEM Systems IS, FS, BRS, EAS and have confidence with all functions of the Systems (or be in partnership with one or more operators working with the system at high levels) to guarantee a perfect training to customers.</li>
                        </div>
                        <div class="text">
                            <li>Have attended our course for representatives agreeing with our guidelines</li>
                            <li>Have an extensive local market knowledge and relevant contacts</li>
                            <li>Investing in marketing for the territory</li>
                            <li>Investing time and efforts to attend our seminars and webinars to remain updated</li>
                            <li>To close a certain number of sales depending on the territory and the operating fields of the market: Human, Veterinary, Environment, Agricolture</li>
                            <li>Participate actively to our community programs bringing testimonials and producing material for it</li>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中间标题 -->
        <div class="middle f-cen">
            <div class="middle-text">Need more information about becoming an affiliate?</div>
            <a href="#">
                <div class="middle-btn">CONTATTACI ORA</div>
            </a>
        </div>

        <!-- Affilate专栏 -->
        <div class="column-Affilate">
            <div class="column-Affilate-main f">
                <div class="column-Affilate-item">
                    <div class="column-Affilate-item-title">Affilate advantages</div>
                    <div class="column-Affilate-item-subtitle">As our official Affiliate YOU:</div>
                    <div class="column-Affilate-item-content">
                        <li>Will have access to representative’s world and to all previous Advantages, to help diffusion of the CIEM System in the way you prefer and receiving income by affiliating other clients.</li>
                        <li>We will give you all the tools to help affiliation programs.</li>
                        <p>Our distribution strategy is based on mutual trust, which translates to profitable business for both parties.</p>
                    </div>
                </div>
                <div class="block"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Calendar } from '@element-plus/icons-vue'

</script>

<style lang="less" scoped>
.header-info {
    &-title {
        color: @text-title;
        font-size: 45px;
        font-weight: 600;
        margin: 80px auto 15px auto;
    }
    &-text {
        color: @text-main;
        font-weight: 600;
        font-size: 14px;
    }
    &-text2 {
        color: @text-main;
        font-size: 14px;
        margin-bottom: 10px;
        margin: 15px;
    }
}

.course {
    padding: 0 50px;
    &-content {
        max-width: @box-width;
        margin: 0 auto;
        height: 380px;
        .left {
            width: 50%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
            }
        }
        &-main {
            width: 50%;
            background-color: #eff6fc;
            background-size: cover;
            padding: 30px 25px;
            height: 100%;
            .icon {
                color: #fff;
                background-color: @bg2;
                font-size: 38px;
                width: 60px;
                height: 60px;
                border-radius: 50%;
            }
            &-title {
                color: @text-title;
                font-weight: 600;
                font-size: 34px;
            }
            &-date {
                color: @text-bg;
                font-size: 28px;
            }
            &-dateInfo {
                color: @text-title;
                font-style: italic;
                font-size: 14px;
            }
            &-text {
                font-size: 14px;
                color: @text-main;
                margin: 15px 0;
            }
            .btn {
                color: @text;
                max-width: 120px;
                padding: 8px;
                background-color: @bg2;
                margin-top: 15px;
                font-weight: 200;
            }
        }
    }
}
.column-advantage {
    padding: 100px 50px;
    background: url("../assets/images/distributors/bg.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin-top: 60px;

    .column-advantage-main {
        max-width: @box-width;
        margin: 0 auto;
        .column-advantage-item {
            width: 50%;
            &-title {
                font-weight: 600;
                color: @text-title;
                font-size: 34px;
            }
            &-subtitle {
                font-weight: 600;
                color: @text-title;
                font-size: 24px;
                margin: 15px;
            }
            .text {
                align-self: start;
                flex: 1;
                padding: 0 25px;
                font-size: 14px;
                color: @text-main;
                li {
                    padding: 5px 0;
                }
            }
        }
        .block {
            width: 50%;
        }
    }
}
.column-Requirements::before {
    position: absolute;
    top: 0px;
    left: 0px;
    content: "";
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
}
.column-Requirements {
    padding: 100px 50px;
    background: url("../assets/images/distributors/bg2.jpg");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;

    .column-Requirements-main {
        position: relative;
        max-width: @box-width;
        margin: 0 auto;
        opacity: 1;
        z-index: 999;
        .block {
            width: 40%;
        }
        .column-Requirements-item {
            width: 60%;
            &-title {
                font-weight: 600;
                color: @text-title;
                font-size: 34px;
                margin-bottom: 30px;
            }
            .text {
                align-self: start;
                flex: 1;
                padding: 0 25px;
                font-size: 14px;
                li {
                    padding: 5px 0;
                }
            }
        }
    }
}

.column-Affilate {
    padding: 100px 50px;
    background: url("../assets/images/distributors/bg3.jpg") no-repeat;
    background-size: cover;
    background-position: right;
    overflow: hidden;

    .column-Affilate-main {
        max-width: @box-width;
        margin: 0 auto;
        .column-Affilate-item {
            &-title {
                font-weight: 600;
                color: @text-title;
                font-size: 34px;
            }
            &-subtitle {
                font-weight: 600;
                color: @text-title;
                font-size: 24px;
                margin: 15px 0;
            }
            li {
                font-size: 14px;
                margin-bottom: 8px;
            }
            p {
                font-style: italic;
                font-size: 25px;
                color: @text-title;
            }
        }
        .block {
            width: 50%;
        }
    }
}
</style>